<template>
  <div>
    <x-checkbox
      v-bind="$props"
      v-for="(item,index) in myValue"
      :key="item.id"
      :value="item"
      :index="index"
      :existData.sync="checkedData"
      :exitCheckList="exitCheckList"
      @change="handleChange"
      @addCheckbox="handleAdd"
      @removeCheckbox="handleRemove"/>    
    <!-- <el-checkbox v-for="(item,index) in myValue"
      :disabled="!item"
      :key="`ic_${index}`"
      :label="item">
      <el-input class="input-small" placeholder="自定义属性"
        v-bind="$props"
        :minlength="minlength"
        :maxlength="maxlength"
        :value="item"
        @change="handleChange(index,$event)"/>
      <el-button v-if="index===0" @click="handleAdd(index)" :disabled="max <= myValue.length || disabled">
        <i class="el-icon-plus"></i>
      </el-button>
      <el-button v-if="index!==0" @click="handleRemove(index)" :disabled="disabled">
        <i class="el-icon-minus"></i>
      </el-button>
    </el-checkbox> -->
  </div>
</template>
<script>

  import * as ui from 'l-element'
  import XCheckbox from './XCheckbox'
  // import { cloneObj } from 'utils'
  // import { SALE_CUSTOM_CHECK } from '../constant'
  export default {
    components: {
      XCheckbox
    },
    props: {
      ...ui.default.Input.props, // 继承Input的所有属性
      exitCheckList: Array,
      value: {
        type: Array,
        default: []
      },
      minlength: {
        type: Number
      },
      maxlength: {
        type: Number
      },
      checkedData: Array
    },
    computed: {
    },
    data () {
      return {
        myValue: this.value
      }
    },
    methods: {
      handleChange (index, value) {
        this.$set(this.myValue, index, value)
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      },
      handleAdd (index) {
        this.myValue.push({
          custom: 1,
          name: '',
          id: this.unique()
        })
      },
      handleRemove (index) {
        let delItem = this.myValue[index]
        this.myValue.splice(index, 1)
        this.$emit('change', this.myValue)
          .$emit('input', this.myValue)
          .$emit('deleteExitItem', delItem)
      }
    }
  }
</script>

<style lang="scss">
</style>
